<!DOCTYPE html>
<title>Media Controls: overflow menu toggle class for animation.</title>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../media-controls.js'></script>
<video controls width=400></video>
<script>
async_test(t => {
  const video = document.querySelector('video');
  enableTestMode(video);
  video.src = '../content/test.ogv';
  video.addTextTrack('captions', 'foo');
  video.addTextTrack('captions', 'bar');

  video.onloadeddata = t.step_func(() => {
    const menu = overflowMenu(video);
    const captionsList = textTrackMenu(video);

    // Open overflow => close overflow
    expectAllMenuClosed();
    singleTapOnControl(overflowButton(video), t.step_func(() => {
      expectOpenMenu();

      singleTapOutsideControl(menu, t.step_func(() => {
        expectAllMenuClosed();
        // End of scenario

        // Open overflow => open captions list => close captions list
        clickCaptionButton(video, t.step_func(() => {
          expectOpenMenu();

          singleTapOutsideControl(captionsList, t.step_func(() => {
            expectAllMenuClosed();
            // End of scenario

            // Open overflow => open captions list => select track
            clickTextTrackAtIndex(video, 0, t.step_func(() => {
              expectAllMenuClosed();
              // End of scenario

              // Open overflow => open captions list => click back to overflow => close overflow
              clickCaptionButton(video, t.step_func(() => {
                expectOpenMenu();
                const trackListHeader = textTrackListHeader(video);

                singleTapOnControl(trackListHeader, t.step_func(() => {
                  expectOpenMenu();

                  singleTapOutsideControl(menu, t.step_func_done(() => {
                    expectAllMenuClosed();
                    // End of scenario
                  }));
                }));
              }));
            }));
          }));
        }));
      }));
    }));

    function expectClosedMenu() {
      assert_true(menu.classList.contains('closed'));
    }

    function expectOpenMenu() {
      assert_false(menu.classList.contains('closed'));
    }

    function expectAllMenuClosed() {
      assert_equals(getComputedStyle(menu).display, 'none');
      assert_equals(getComputedStyle(captionsList).display, 'none');
      expectClosedMenu();
    }
  });

});
</script>
